CloudFront Functionsでオリジンに手を加えずにURLリダイレクトをしたい

#CloudFront Functions

#Amazon CloudFront

吉井亮

2021.12.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。
ご機嫌いかがでしょうか。
"No human labor is no human error" が大好きなネクストモード株式会社の吉井です。

CloudFront Functions を使用した URL リダイレクトを実装する機会がありましたので、備忘として記事に残します。
オリジン (Web サーバー) でリダイレクトする方法はすでに一般的だと思いますが、のっぴきならない事情で CloudFront でリダイレクトしたい方の参考になれば幸いです。

備忘

CloudFront やオリジン、関連する構築が完了しており Web サイトは正常に動作していることを前提としています。

本エントリで示しているサンプルコードは以下の図のようなリダイレクトを実現しています。

関数の作成

関数を作成します。
マネジメントコンソールの CloudFront Functions を開きます。

関数の作成 をクリックします。

任意の名前と説明を記入して関数の作成 をクリックします。

コードの貼り付け

関数コードにコードを貼り付けます。
サンプルは図の下に示してあります。

function handler(event) {
  var request = event.request;
  var host = request.headers.host.value;
  var uri = request.uri;
  var newurl = `https://${host}/index.html` // Change the redirect URL to your choice

  // Check the URI is '/abc/sign-up'.
  if (uri === '/abc/sign-up') {
    newurl = `https://${host}/sign-up`;
  }
  // Check the URI is '/abc/login'.
  else if (uri === '/abc/login') {
    newurl = `https://${host}/login`;
  }
  else {
    return request;
  }

  var response = {
    statusCode: 301,
    statusDescription: 'Moved Permanently',
    headers:
      { "location": { "value": newurl } }
  }

  return response;
}

コードの修正

上のサンプルコードの6～13行目にリダイレクト対象を記述している箇所があります。
ここをご自身の環境に合わせて追加・編集・削除します。

URI が /abc/sign-up に一致した場合に https://${host}/sign-up へリダイレクトしています。
ここをよしなに設定ください。

  // Check the URI is '/abc/sign-up'.
  if (uri === '/abc/sign-up') {
    newurl = `https://${host}/sign-up`;
  }

修正が終わったら 変更の保存 をクリックします。

関数のテスト

同じ画面の テスト タブで関数のテストを実行可能です。
実行環境へ反映する前にテストしておきましょう。

上のサンプルコードですと、URLパスと host ヘッダーを指定します。
URLパスはリダイレクト元、host ヘッダーはご自身のサイトの FQDN を記入ください。

テスト結果

関数をテスト をクリックし正常な結果が返ってくることを確認します。
今回の例ですと、statusCode が 301、response.headers.location.value がリダイレクト先であることが正常です。

関数の発行

同じ画面の発行タブを開きます。

関数の発行 ボタンをクリックします。

関連付けを追加 ボタンをクリックして、リダイレクトを行いたいディストリビューションとキャッシュビヘイビアを指定します。

動作確認

関数の発行をしディストリビューションとキャッシュビヘイビアに関連付けたら
実際の URL で動作確認を行うことをお忘れなく。

以降のメンテナンス

初回に関数を発行した以降の修正は同じ手順を繰り返します。

コード修正
関数のテスト
関数の発行
実 URL での動作確認

留意点

CloudFront Functions は 1 msの起動時間制限があります。
リダイレクト対象が大量に増えるようなケースでは起動時間制限を超えないようご留意ください。

まとめ

重い処理を必要としないリダイレクトやヘッダーのカスタマイズ、ベーシック認証などは CloudFront Functions を使用することで実装可能です。
CloudFront Functions で実装するのかオリジンで実装するかの正解はないですが、エッジで出来ることはエッジで実装するのも選択肢の一つだと感じました。